/*
 * @LastEditors: yuSeen
 * @LastEditTime: 2021-12-15 21:08:45
 * 天凉好个秋
 */
import { useSettingStore } from "@/store/setting";
import { DisplayModeEnmu } from '@/types/store/settingStoreType'
import config from "@/config/config";

export const useDisplayModeSetting = () => {
    const settingStore = useSettingStore()

    // 获取当前显示模式
    const getDisplayMode = () => settingStore.displayMode

    /**
     * @description: 切换显示模式
     * @param {DisplayModeEnmu} targetMode 目标模式，若不传则认为是切换模式
     * @return {*}
     */    
    const setDisPlayMode = (targetMode: DisplayModeEnmu | undefined) => {
        if(targetMode === undefined) {
            targetMode = getDisplayMode() === DisplayModeEnmu.DARK ? DisplayModeEnmu.LIGHT : DisplayModeEnmu.DARK
        }
        settingStore.setDisplayMode(targetMode)
        const htmlRoot = document.getElementById("htmlRoot") as HTMLElement;
        htmlRoot.setAttribute("data-displayMode", targetMode);
        for(let [key, value] of Object.entries(config.style.colors[targetMode])) {
            htmlRoot.style.setProperty('--' + key, value);
        }
    }
    
    return {
        getDisplayMode,
        setDisPlayMode
    }
}